<template>
  <div id="userDetail">
    <Head />
    <div class="top">
      <div class="top_1">
        <ul>
          <li
            style="
              font-size: 28px;
              font-family: 'Helvetica Neue', sans-serifs;
              font-weight: bold;
            "
          >
            我的Titk购物
          </li>
          <li>首页</li>
        </ul>
      </div>
    </div>

    <div class="center">
      <div class="left">
        <ul>
          <li
            :class="{ active: switchClick === 'account' }"
            @click="switchClickChange('account')"
          >
            账号管理
          </li>
          <li
            :class="{ active: switchClick === 'personal' }"
            @click="switchClickChange('personal')"
          >
            个人信息
          </li>

          <li
            :class="{ active: switchClick === 'address' }"
            @click="switchClickChange('address')"
          >
            收货管理
          </li>
          <li
            :class="{ active: switchClick === 'payfor' }"
            @click="switchClickChange('payfor')"
          >
            支付宝绑定设置
          </li>
          <li
            :class="{ active: switchClick === 'orderMange' }"
            @click="switchClickChange('orderMange')"
          >
            订单管理
          </li>
          <li
            :class="{ active: switchClick === 'loginoout' }"
            @click="switchClickChange('loginoout')"
          >
            退出登录
          </li>
        </ul>
      </div>
      <div class="title">
        <span style="margin-left: 5px">{{ this.title }}</span>
      </div>
      <div class="right">
        <div class="right_show">
          <div class="show_head">
            <span>基本资料</span>
            <span>头像管理</span>
          </div>

          <div class="content">
            <span style="font-size: 13px"
              >亲爱的
              <span style="color: red">{{ this.form.username }}</span>
              请完善你的用户信息 以便别人可以找到你</span
            >
            <div class="img">
              <span>当前头像</span>
              <el-avatar
                shape="square"
                style="margin-left: 80px"
                :size="100"
                :src="imgurl"
              ></el-avatar>
            </div>
            <el-upload
                class="upload-demo"
                ref="upload"
                :action="uploadurl" 
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                :auto-upload="false"
              >
                <el-button slot="trigger" size="small" type="text"
                style="margin-left: 40px;"
                  >修改头像</el-button
                >
                <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="text"
                  @click="submitUpload"
                  >上传</el-button
                >
              </el-upload>
            <div class="de_form">
              <el-form
                ref="form"
                :model="form"
                label-width="80px"
                style="margin-left: -21px"
              >
                <el-form-item label="用户名">
                  <el-input v-model="form.username" style="width: "></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="出生日期">
                  <el-col :span="11">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.birthday"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="form.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item style="margin-left: -82px">
                  <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/head.vue";
export default {
  name: "userDetail",
  components: {
    Head,
  },

  data() {
    return {
      switchClick: "personal",
      title: "个人信息",
      form: {
        id: "",
        username: "",
        email: "",
        birthday: "",
        sex: "",
      },
      imgurl: "",
      userid: localStorage.getItem("id"),
      uploadurl: "",
    };
  },

  methods: {
    switchClickChange(type) {
      this.switchClick = type;
      this.title =
        type === "account"
          ? "账号管理"
          : type === "personal"
          ? "个人信息"
          : type === "address"
          ? "收货管理"
          : type === "payfor"
          ? "支付宝绑定设置"
          : type === "orderMange"
          ? "订单管理"
          : "退出登录";
    },

    //获取用户信息
    getInfoDetail() {
      let id = localStorage.getItem("id");
      let url = "/api/user/getUserById/" + id;
      this.$http.get(url).then((res) => {
        if (res.data.code === 200) {
          this.form = res.data.data;
         if(res.data.data.avatarImg.includes("http")){
            this.imgurl = res.data.data.avatarImg;
         }else{
          this.imgurl = "http://localhost:8081/avatar/"+ res.data.data.avatarImg;
         }
        }
      });
    },

    // 保存信息
    onSubmit() {
      this.$http.put("/api/user/updateUser", this.form).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "保存失败",
            type: "error",
          });
        }
      });
    },
    // 点击上传按钮后触发
    submitUpload() {

      this.$refs.upload.submit();
    },
    // 上传成功后触发
    handleUploadSuccess(response, file) {
      // 更新头像的 URL
      console.log(response);
      this.imgurl ="http:localhost:8081/avatar/"+ response.data.avatarImg;
      this.$message.success("上传成功");
     // 刷新页面
     location.reload();   
    },
    // 上传失败后触发
    handleUploadError(err, file, fileList) {
      this.$message.error("上传失败，请重试");
    },
  },

  mounted() {
    let url = "http://localhost:10010/api/user/uploadAvatar/" + localStorage.getItem("id");
    this.uploadurl = url;
    this.getInfoDetail();
  },
};
</script>

<style lang="less" scoped>
#userDetail {
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    height: 60px;
    margin-top: -134px;
    background: #ff4401;

    .top_1 {
      padding-left: 150px;
      padding-right: 150px;
      width: 1400px;
      cursor: default;

      ul {
        li {
          color: #fff;
          font-size: 16px;
          float: left;
          line-height: 60px;
          margin-right: 120px;
        }
      }
    }
  }

  .center {
    width: 1200px;
    margin: 0 auto;

    .left {
      width: 150px;
      float: left;
      margin-top: 74px;

      ul {
        padding-left: 0%;
        li {
          width: 150px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
        }
        li {
          &:hover {
            color: #ff4401;
          }
        }

        li.active {
          color: #ff4401;
        }
      }
    }

    .right {
      width: 850px;
      height: 600px;
      float: right;
      margin-right: 122px;
      margin-top: 50px;
      border: 1px solid #cccccc;

      .right_show {
        .show_head {
          height: 40px;
          border: 1px solid #cccccc;

          span {
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-style: 14px;
            text-align: left;
            font-size: 14px;
            margin-left: 8px;
            margin-right: 8px;
            color: #252424;
            cursor: pointer;
          }
          span {
            &:hover {
              color: #ff4401;
            }
          }
        }
        .content {
          margin-top: 40px;
          margin-left: 80px;

          .span {
            font-size: 14px;
            color: #252424;
          }
          .img {
            margin-top: 40px;
            span {
              float: left;
              font-size: 13px;
              color: #252424;
            }
            el-avatar {
              float: left;
            }
          }
          .de_form {
            padding-top: 100px;
            font-size: 13px;

            /deep/ .el-input__inner {
              width: 60%;
            }
            /deep/ .el-form-item__label {
              text-align: left;
              font-size: 13px;
              color: #252424;
            }
          }
        }
      }
    }
    .title {
      position: relative;
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      font-weight: bold;
      color: #ea2b2b;
      span {
        position: absolute;
        top: 45px;
        left: 220px;
      }
    }
  }
}

/deep/ .head_center {
  display: none;
}
</style>